<template>
  <div class="div-1">
      <div class="div-2">
          <span class="span-1">团队列表</span>
          <span class="span-2">已推出<span class="span-3">{{da}} </span>人</span>
      </div>
      <div class="div-3" v-for="(item,index) in tu" :key="index">
          <img :src="item.URL" alt="">
          <div class="div-3-1">
              <p class="p-1">{{item.ni}} </p>
              <p>绑定时间:{{item.bang}}</p>
          </div>
          <div class="div-3-2">
              <p class="p-1">以推广{{item.tui}}人</p>
              <p class="p-2">{{item.ding}} 个订单</p>
          </div>
      </div>
  </div>
</template>

<script>
import nvhai from '../../../assets/nvhai.jpeg'
import labi from '../../../assets/labi.jpeg'
import luoli from '../../../assets/luoli.jpeg'
import xiangji from '../../../assets/xiangji.jpeg'
export default {
    data() {
        return {
            shu:0,
            tu:[{
                URL:labi,
                ni:'原野新之助',
                bang:"2021-06-15",
                tui:"5",
                ding:2,
            },{
                URL:nvhai,
                ni:'可爱菇凉',
                bang:"2021-02-28",
                tui:"5",
                ding:9,
            },{
                URL:xiangji,
                ni:'晓月',
                bang:"2021-08-01",
                tui:"5",
                ding:1,
            },{
                URL:luoli,
                ni:'可爱菇凉',
                bang:"2021-02-28",
                tui:"5",
                ding:9,
            },]
        }
    },
    computed:{
        da(){
            return this.tu.length
        },
    }
}
</script>

<style lang="less" scoped>
    .div-1{
        background-color: rgb(255, 255, 255);
        border-top: 1px solid aliceblue;
        
        .div-2{
            height: 1.5rem;
            line-height: 1.5rem;
            padding: 0.3rem 0.8rem;
            display: flex;
            justify-content: space-between;
            .span-1{
                font-size:0.9rem;
                font-weight: 600;
            }
            .span-2{
                font-size:0.7rem;
                color: #858585;
            }
            .span-3{
                color: rgb(255, 0, 0);
            }
        }
        .div-3{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.5rem;
            padding: 0.5rem 0.8rem;
            border-bottom:1px solid rgb(221, 221, 221) ;
            img{
                    width: 3rem;
                    border-radius:3rem ;
                }
            .div-3-1{
                margin-left: 0.5rem;
                flex: 1;
                .p-1{
                    font-size: 0.9rem;
                    margin-bottom: 0.3rem;
                }
            }
            .div-3-2{
                .p-1{
                    font-size: 0.8rem;
                    margin-bottom: 0.3rem;
                    color: #858585;
                }
                .p-2{
                    color: #858585;
                text-align: right;
                }
            }
        }
    }
</style>